<template>
  <div class="box" v-show="flag">123</div>
  <button @click="flag = !flag">点击</button>

  <br />
  <child />
  {{ age }}
  {{ shd() }}
  <div>
    <button @click="handleClick">点击123</button>
  </div>
</template>

<script setup>
import { ref, reactive, onErrorCaptured } from "vue";
import child from "./child.vue";
const flag = ref(true);
const age = ref(0);
const handleClick = () => {
  age.value++;
};
function shd() {
  alert(111);
}
</script>

<style scoped>
.box {
  perspective: 500px;
  /* border: 1px solid red; */
  background-color: red;
  width: 500px;
  padding: 20px;
  animation: identifier 2s ease;
  transition: 2s;
  /* &:hover{

  } */
}
div:hover {
  transform: rotateY(360deg) rotateX(100deg);
  background-color: orange;
}
@keyframes identifier {
  from {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(50px);
  }
  to {
    transform: translateX(0);
  }
}
</style>
